<template>
	<view :class="currentTheme">
		<a-nabbar :name="isEdit?'编辑剧本':'新增剧本'"/>
		<view class="u-padding-32">
			<view v-if="step==1">
				<!-- 第一步 -->
				<view class="text-white u-font-32 ">剧本名称</view>
				<view  class="u-margin-top-32 u-position-relative">
					<u-input v-model="form.name" :customStyle="{...customStyle,padding:'10rpx 20rpx'}" :border="false" maxlength="12" :clearable="false" placeholder="请输入剧本名称" placeholder-style="color:#B0B2D8"/>
				</view>
				<view class="text-white u-font-32 u-margin-top-26">编辑剧本简介</view>
				<view  class="u-margin-top-32 u-position-relative">
					<u-input v-model="form.info" type="textarea" :border="false" height="203" :auto-height="false" maxlength="300" :custom-style="customStyle" :clearable="false"/>
					<view class="u-position-absolute max-length-txt text-color-9598a4 u-font-28">
						{{form.info&&form.info.length || 0}}/300字
					</view>
				</view>
				<view class="text-white u-font-32 u-margin-bottom-26 u-text-center  u-margin-top-50">添加剧本图片</view>
				<view class="u-flex u-row-center">
					<uploader ref="image" max-count="6" :bgColor="currentThemeObj.backgroundSecondColor"  :list="form.sliderImage" v-if="showUpload" @getImgStr="getImgStr" @uploaded="getUpload"></uploader>
				</view>
				<view class="text-color-9598a4 u-font-26 u-margin-top-20 u-text-center">最多可上传6张</view>
			</view>
			<view class=""  v-if="step==2">
				<view class="u-flex u-row-center">
					<text class="u-font-32 text-white u-margin-right-35">设置剧本人数</text>
					<view class="">
						<select-item v-model="form.people" width="180" :list='personList' @getSelect="getPerson"></select-item>
					</view>
				</view>
				<view class="u-flex u-row-center u-margin-top-20" v-if="mpeople.length">
					<text class="u-font-32 text-white u-margin-right-35">设置男女人数</text>
					<view class="">
						<select-item v-model="form.mpeople" width="180" :list="mpeople"></select-item>
					</view>
				</view>
				<view class="page-title u-margin-top-50 text-color-765CFE u-text-center u-font-32">选择剧本标签</view>
				<!-- 第二步 -->
				<view v-for="(item,index) in thirdStepList" :key="index" class="u-margin-top-20">
					<select-items :item="item" v-model="item.checked" :key="item.id"></select-items>
				</view>
			</view>
			<view class=""  v-if="step==3">
				<view class="u-flex">
					<text class="form-label">价格</text>
					<view class="u-flex-1"><u-input v-model="form.intoPayMoney" :clearable="false" border border-color="#423F4F" placeholder="请输入剧本价格" placeholder-style="color:#B0B2D8"/></view>
				</view>
				<view class="u-margin-top-78">
				</view>
			</view>
			<view class="u-margin-top-80 u-text-center">
				<text class="step-num" :class="{'step-active':index+1===step }" v-for="(num,index) in stepNum" :key="index">{{index+1}}</text>
				<view class="text-white u-font-32 u-margin-top-30">
					仅需3步，轻松上传剧本
				</view>
				<!-- <u-button  shape="circle" :custom-style="{
					marginTop: '77rpx',
					marginBottom: '100rpx',
					backgroundColor:'#765CFE',
					borderColor:'none',
					width:'300rpx',
					height:'60rpx'
				}" hover-class="none">
					<text class="text-white u-font-28">下一步</text>
				</u-button> -->
				<view class="u-padding-top-70 u-padding-bottom-70">
					<item-btn  @click="saveStep" :loading="loading" width="300" height="64">下一步</item-btn>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uploader from '@/components/upload/upload.vue'
	import {add,getDetail,getList,deleteIds } from '@/api/crud.js'
	import selectItems from '@/components/selectArr/selectArr.vue'
	export default {
		data() {
			return {
				content: '',
				selectList: [],
				customStyle:{
					background:'#1F1B34',
					borderRadius:'17rpx',
					padding:'26rpx',
					color:'white'
				},
				uploadFlag:true,
				apiModule:'shopApi',
				step:1,
				stepNum:3,
				secondStepList:[],
				thirdStepList:[],
				personList:[],
				form:{},
				larpChecked:[], //剧本类型
				mpeople:[], //男女人数
				loading:false,
				showCity:false,
				images:[],
				showUpload:true,
				option:{}
			}
		},
		computed: {
			isEdit(){
				return !!this.option.productId
			},
			apiType(){
				return this.isEdit? 'product':'storeProductTemp'
			}
		},
		components: {
			uploader,selectItems
		},
		async onLoad(option) {
			await this.$store.dispatch('getClassify').then(res=>{
				this.thirdStepList = this.getFilterList(['剧本类别','剧本背景','剧本题材'],res).map(this.setChecked);
				this.secondStepList = this.getFilterList(['发行方式'],res);
				const {children} = this.getFilterList(['人数'],res)[0]
				this.personList = children.map(val=>({label:val.label,value:val.id}))
			})
			
			// //编辑剧本
			// if(option.productId){
			// 	this.option = option;
			// 	this.showUpload = false;
			// 	await getDetail(option,this.apiType,this.apiModule,'findTempByProductId').then(res=>{
			// 		this.form = res
			// 		this.showUpload = true;
			// 		//设置第三步的剧本类别条件
			// 		const categorys = JSON.parse(this.form.categoryJson);
			// 		this.thirdStepList = this.thirdStepList.map(val=>{
			// 			const checked = categorys.find(item=>item.label===val.label);
			// 			if(checked){
			// 				const ids = checked.id.split(',').map(a=>Number(a));
			// 				val.checked = ids;
			// 			}
			// 			return val;
			// 		})
			// 	})
			// 	return false;
			// }
			//获取历史的新增剧本记录
			getDetail('',this.apiType+'/getByUid',this.apiModule,this.$store.getters.loginForm.uid).then(res=>{
				this.form = res || {
					info:'',
					name:'',
					releaseTime:'',
					people:'',
					mpeople:'', 
				};
				this.step = this.form.operationStep ? this.form.operationStep+1 : 1;
			})
		},
		methods: {
			getFilterList(filterArr,res) {
				return res.filter(val=>filterArr.includes(val.cateName))
			},
			setChecked(val){
				this.$set(val,'checked',[])
				return val;
			},
			//上传的图片
			getImgStr(str){
				this.form.sliderImage = str;
			},
			//上传的图片
			getBuyVoucherStr(str){
				this.form.buyVoucherStr = str;
			},
			//监听上传图片
			getUpload(flag){
				this.uploadFlag = flag;
			},
			//第一步验证
			step1(){
				const {name,info} = this.form;
				if(!name){
					this.$u.toast('请填写剧本名称')
					return false;
				}
				if(!info){
					this.$u.toast('请编辑剧本简介')
					return false;
				}
				if(!this.uploadFlag) {
					this.$u.toast('门店图片上传中')
					return false;
				}
				const {sliderImage} = this.form;
				if(!sliderImage){
					this.$u.toast('请至少上传一张剧本图片')
					return false;
				}
				return true;
			},
			//第二步验证
			step2(){
				if(this.mpeople.length===0){
					this.$u.toast('请选择剧本人数')
					return false;
				}
				if(!this.form.mpeople){
					this.$u.toast('请选择男女人数')
					return false;
				}
				const getUnSelect = this.thirdStepList.find(val=>val.checked.length===0)
				if(getUnSelect){
					this.$u.toast('请选择'+getUnSelect.cateName)
					return false;
				}
				return true;
			},
			//第三步验证
			step3(){
				if(!this.form.intoPayMoney){
					this.$u.toast('请设置剧本价格')
					return false;
				}
				const {buyVoucher } = this.form;
				if(!buyVoucher ){
					this.$u.toast('请至少上传一张凭证图片')
					return false;
				}
				return true;
			},
			//保存步骤
			saveStep1(obj){
				//obj.sliderImage = this.images;
				return obj
			},
			saveStep2(obj){
				const typeList = this.getTypeList();
				obj.categoryJson = JSON.stringify(typeList)
				obj.mpeople = obj.mpeople.replace('男','');
				obj.people = obj.people.replace('人','');
				return obj
			},
			saveStep3(obj){
			},
			saveStep(){
				const isComplete = this.step==3; //生成剧本
				if(!this[`step${this.step}`]()){
					return false;
				}
				let obj = {
					sliderImage:'',
					...this.form,
					operationStep:this.step,
					isComplete
				}
				obj = this[`saveStep${this.step}`](obj)
				//if(obj.releaseTime) obj.releaseTime+=' 00:00:00';
				//const name = this.isEdit ? 'saveByTemp':'saveTemp'
				this.loading = true;
				add(obj,this.apiType,this.apiModule,`saveTempByStoreId/${this.loginForm.storeId}`).then(res=>{
					this.form = obj;
					this.form.id = res;
					this.loading = false;
					if(!isComplete){
						++this.step;
						if(this.step===3){
							if(this.form.people) this.form.people+='人'
							if(this.form.mpeople) this.form.mpeople+='男'
							//设置剧本人数
							this.getPerson([{
								label:this.form.people
							}])
						}
						return false;
					}
					this.routeBack('保存成功')
				}).catch(()=>{
					this.loading = false;
				})
			},
			//获取选中的动态选项
			getTypeList(){
				return  this.thirdStepList.map(val=>{
					const checkArr = Array.isArray(val.check); //判断是否为多选
					const getCheckList = val.children.filter(item=>val.checked.includes(item.id))
					const name = getCheckList.map(val=>val.cateName).join(',')
					const id = getCheckList.map(val=>val.id).join(',')
					return {id,label:val.cateName,name}
				}).filter(val=>val.id)
			},
			//获取选择的剧本人数
			getPerson(arr){
				const item = arr[0];
				const num = item.label.replace('人','');
				const mpeople = [{
					label:'0男',
					value:0
				}];
				let i = 0;
				while(i<num){
					mpeople.push({
						label:`${i+1}男`,
						value:i+1
					})
					i++;
				}
				this.mpeople = mpeople
			}
		},
	}
</script>

<style lang="scss" scoped>
.max-length-txt{
	right:20rpx;
	bottom: 20rpx;
}
.form-label{
	width: 210rpx;
	color: white;
	font-size: 32rpx;
}
.step-num{
	display: inline-block;
	width: 42rpx;
	height: 42rpx;
	border: 2rpx solid $primary;
	border-radius: 50%;
	line-height: 40rpx;
	font-size: 30rpx;
	color: $primary;
	margin: 0 50rpx;
	&.step-active{
		background-color: $primary;
		color: white;
	}
}
.showFlag{
	background-color: rgb(118, 92, 254);
	text-align: center;
	line-height: 50rpx;
	color: white;
	border-radius: 50rpx;
	margin: 30rpx auto 0;
	width: 200rpx;
}
</style>